/*
 * 弹框多数据选择器
 *
 * @author 啊九
 * @since 2017/12/21
 */
import React from 'react';
import { Modal, Row, Col, Form, TreeSelect, Select, Table, Input, Button, Icon, Checkbox, Popconfirm, message } from 'antd';
import { Link } from "dva/router";
import styles  from './PopUpSelect.less';
import { request } from '../../config/request'
import $ from 'jquery';
import { cloneDeep, get } from 'lodash'
import AdvanceSearch from '../CollapsiblePanels/AdvanceSearch'
import {QueryCondition} from '../Grid/Grid'
import config from '../../config/config'
import cx from 'classnames'
import Keypress  from 'widget/Keypress'

const { Component } = React
const FormItem = Form.Item
const { Option, OptGroup } = Select
const TreeNode = TreeSelect.TreeNode

/*
*
* 产品选择组件
*
*/
export default class extends Component {
  // 构造函数
  constructor(props, context) {
    super(props, context);
    this.state = {
      queryList: cloneDeep(props.queryList),
      //需要传递的参数
      refreshByEnter: this.props.refreshByEnter || false,//监控键盘事件，自动刷新数据
      visible: this.props.visible || false,//是否打开
      isSave: this.props.isSave || false,//是否保存已选数据
      onItem: this.props.onItem || false,//更新已选数据
      itemIds: this.props.itemIds || [],
      extendPropName: this.props.extendPropName || 'extendPropName',//属性名称字段
      //组件宽度
      modalWidth: 1000,
      //右侧选择框的高度
      maxHeight: 403,
      //表格数据加载标志
      loadingFlag: true,
      //查询条件
      search: {
        catalogId: "",//前端类目
        groupPropId: "",//扩展属性类型
        tagId: "",//产品标签
        propId: "",//产品属性
        propValueId: '', // 选择子产品属性
        propShow: '', // 产品属性显示
        itemCode: "",//产品编号
        itemName: "",//产品名称
      },
      pageNo: 1,//当前页
      pageSize: 10,//单页条数
      tableData: [],
      total: 0,
      // 已选择的产品
      selectedProduct: [],
      // 右侧已选择产品中选择的行
      selectedRows: [],
      // 右侧已选择产品中选择的行号
      selectedRowKeys: [],
      //关闭按钮  必填
      closeCbk: () => {
        this.props.closeCbk();
      },
      // 确认回调
      confirmCbk: (item) => {
        this.props.confirmCbk(item,this.params||{})
      }
      }
    this.onChange=function () {
      console.log('onChange,this.state.onItem',this.state.onItem)
      let selectedProduct = cloneDeep(this.state.selectedProduct)
      this.props.onChange&&this.props.onChange(selectedProduct);
    
    }  //更新已选数据
    this.handleParam = function (params = {}) {
      params = cloneDeep(params)
      if (this.props.handleParam) {
        params = this.props.handleParam(params)
      }
      return params
    
    }  //更新已选数据
  }


  //Modal初始化
  componentWillMount() {
    this.setModalWidth()
    // 还需新增state初始化
  }

  //准备：即将被重新渲染，状态未变化
  componentWillUpdate(nextProps, nextState) {
    let self = this;
    //浏览器大小改变的时候
    window.onresize = function () {
      if (self.state.visible) {
        self.setModalWidth()
      }
    };
  }

  //完成：正在被重新渲染，状态已变化
  componentDidUpdate(prevProps, prevState) {
    // this.getTableHeight()
  }

  // 已加载组件，收到新属性时调用
  componentWillReceiveProps(nextProps) {
    // this.state.propsParameter.selArea = nextProps.selArea;
    // this.setState({});
    let flag=this.state.visible != nextProps.visible
    this.state.visible = nextProps.visible;
    if(this.state.visible ){
      if(nextProps.isSave){
        let selectedProduct = cloneDeep(nextProps.onItem).map(item => {
          item.key = item[nextProps.idKey]
          item.itemName = item.name
          return item
        })
        this.setState({
          selectedProduct,
          itemIds: nextProps.itemIds
        })
      }
      this.setState({
        queryList:nextProps.queryList
      }, ()=>{
        flag&&this.getProductList();
      });
    }
  }

  // 插入真实 DOM
  componentDidMount() {
  }


  //获取产品列表
  async getProductList() {
    let that = this;
    // queryParams 参数处理函数，由调用者传入，用于处理特殊参数
    let { respListKey='rows', idKey, defaultReqParams = {}, queryParams } = this.props;
    this.setState({
      loadingFlag: true,
    })
    let { pageNo, pageSize, search, queryList=[] } = cloneDeep(that.state)
    //组装接口入参
    let params = {
      ...defaultReqParams,
      pageNo,
      pageSize,
      ...params,
    };
    
    queryList.map(item => {
      console.log(item)
      if(item.type==="cascader"){//key为数组
        item.key&&item.key.map((val,idx)=>{
          params[val] = item.value[idx]
        })
      }else {
      params[item.key] = item.value;
      }
    });
    if (queryParams) {
      params = queryParams(queryList);
    }
    params={
        ...defaultReqParams,
      pageNo,
        pageSize,
        ...params,
      }
    params=this.handleParam(cloneDeep(params))
    that.params=params
    let data = await request({
      url: that.props.requestUrl,
      method:that.props.method|| 'POST',
      data: params
    });
    let {rows,success,msg,total}=data
    
    if (success) {
      data[respListKey].map((item, i) => {
        item.key = item[idKey]
      })
      let tableData = data[respListKey]
      this.setState({
        tableData,
        pageNo:data.pageNo||pageNo,
        total: total||tableData.length,
        loadingFlag: false,
      })
    }
  }

  // 设置Modal宽度
  setModalWidth() {
    let windowWidth = document.body.clientWidth
    let modalWidth = windowWidth * 0.8 > 1200 ? 1200 : windowWidth * 0.8
    this.setState({ modalWidth })
  }

  // 设置表格内容
  setTableColumn() {
    let self = this
    let { idKey, isSingle } = this.props;

    return [
      ...this.props.tableColumn,
      {
        title: isSingle ? '操作' : <Link
        onClick={() => self.handleSelectAll()}
        >全选</Link>,
        width: 70,
        render: (item) => {
          let flag = false;
          this.state.selectedProduct.map((x, i) => {
            if (x[idKey] == item[idKey]) {
              flag = true
            }
          })
          if (this.state.itemIds) {
            this.state.itemIds.map((x, i) => {
              if (x == item[idKey]) {
                flag = true
              }
            })
          }
          return (
            <div className="tableAction">
              <Link onClick={() => { this.handleSelect(item) }} disabled={flag}>
                {flag ? '已选择' : '选择'}
              </Link>
            </div>
          )
        }
      }
    ]
  }
  setSelectedColumn() {
    return [
      ...this.props.selectedColumn,
      {
        title: "操作",
        className: styles.del,
        width: 60,
        fixed: 'right',
        render: (item) => {
          return (
            <Popconfirm
              getPopupContainer={() => document.getElementById('multiSelectContainter')}
              title='确定要删除吗?'
              okText='确定'
              cancelText='取消'
              onConfirm={() => this.deleteRow(item)}
            >
              {/* <Icon onClick={() => this.deleteRow(item)} style={{fontSize: 24}} type="close-circle"/> */}
              <Icon style={{ fontSize: 20 }} type="close-circle" onClick={() => this.deleteRow(item)} />
            </Popconfirm>
          )
        }
      },
    ]
  }

  //分页发生时所调用的方法
  pageChangeHandler(page, size) {
    this.setState({
      pageNo: page,
      pageSize: size
    }, this.getProductList)
  }

  // 设置分页
  setPagination() {
    return {
      current: parseInt(this.state.pageNo),//当前页
      pageSize: this.state.pageSize,//单页条数
      total: this.state.total,//总条数
      simple: true,
      showTotal: e => `共 ${this.state.total} 条`,
      showSizeChanger: true,
      showQuickJumper: true,
      onShowSizeChange: (page, size) => {
        this.pageChangeHandler(page, size)
      },
      onChange: (page, size) => {
        this.pageChangeHandler(page, size)
      }
    }
  }

  //清空组件状态
  clearSearch(cbk) {
    if (!!cbk) {
      this.setState({
        queryList: cloneDeep(this.props.queryList)
      }, cbk)
    } else {
      this.setState({
        queryList: cloneDeep(this.props.queryList)
      })
    }
  }

  //弹窗的确定按钮
  handleConfirm() {
    let that = this
    let obj = cloneDeep(that.state.selectedProduct)
    // let returnData = obj.map(item => {
    //   return {
    //     id: item[idKey],
    //     key: item[idKey],
    //     name: item.itemName
    //   }
    // })
    if(this.state.confirmCbk){
    this.state.confirmCbk(obj)
      return false
    }

    if (!this.state.isSave) {
      this.setState({
        selectedProduct: [],
      }, ()=>{
        this.clearSearch()
        this.onChange()
      })
    } else {
      this.setState({})
    }
    this.state.closeCbk()
  }

  //弹窗的取消按钮
  handleCancel() {
    let that = this
    this.setState(
      {
        selectedProduct: [],
        pageNo: 1,
        pageSize: 10
      },
      ()=>{
        this.clearSearch()
        this.onChange()
      }
    )
    this.state.closeCbk()
  }

  //弹窗的查询按钮
  handleSearch() {
    this.setState({
      pageNo: 1,
      pageSize: 10
    }, () => {
      this.getProductList()
    })
  }

  //弹窗的重置按钮
  handleReset() {
    this.clearSearch(this.getProductList)
  }

  // 列表的选择按钮
  handleSelect(item) {
    let selectedProduct = this.state.selectedProduct;
    let { isSingle } = this.props;
    if (isSingle) {
      selectedProduct = [item]
    } else {
      selectedProduct.push(item)
    }
    this.setState({ selectedProduct },()=>{
      this.onChange()
    })
  }

  handleSelectAll() {
    let { idKey } = this.props;
    let { tableData, selectedProduct } = this.state
    tableData.map(item => {
      let flag = false
      for (let i = 0; i < selectedProduct.length; i++) {
        const e = selectedProduct[i];
        if (e[idKey] === item[idKey]) {
          flag = true
          break
        }
      }
      if (!flag) {
        selectedProduct.push(item)
      }
    })
    this.setState({ selectedProduct },()=>{
      this.onChange()
    })
  }

  // 右侧已选框中每行的删除
  deleteRow(item) {
    let { idKey } = this.props;
    let selectedProduct = this.state.selectedProduct
    let selectedRows = this.state.selectedRows
    selectedProduct.map((x, i) => {
      if (item[idKey] == x[idKey]) {
        selectedProduct.splice(i, 1)
      }
    })

    selectedRows.map((x, i) => {
      if (item[idKey] == x[idKey]) {
        selectedRows.splice(i, 1)
      }
    })
    this.setState({ selectedProduct, selectedRows },()=>{
      this.onChange()
    })
  }
  // 右侧已选框上的删除按钮
  deleteSelected(type) {
    let { idKey } = this.props;
    let self = this
    if (type == 'all') {
      if (self.state.selectedProduct.length === 0) {
        message.warn('已选列表中至少存在一条数据')
        return
      }
      self.setState({ selectedProduct: [], selectedRows: [] })
      self.allSelected()
    } else {
      let selectedRows = self.state.selectedRows;
      let selectedProduct = self.state.selectedProduct;
      let cSelectedProduct = [];
      let cSelectedRows = [];
      selectedRows.map((x, i) => {
        selectedProduct.map((j, y) => {
          if (x[idKey] == j[idKey]) {
            delete selectedProduct[y]
            delete selectedRows[i]
          }
        })
      })

      selectedProduct.map((x, i) => {
        if (x) {
          cSelectedProduct.push(x)
        }
      })

      selectedRows.map((x, i) => {
        if (x) {
          cSelectedRows.push(x)
        }
      })
      this.setState({ selectedProduct: cSelectedProduct, selectedRows: cSelectedRows },()=>{
        this.onChange()
      })
    }
  }

  allSelected(flag) {
    let self = this
    let arr = []
    if (flag) {
      let { selectedProduct } = self.state
      arr = selectedProduct.map(e => e.key)
    }
    self.setState({ selectedRowKeys: arr },()=>{
      this.onChange()
    })
  }

  //更新状态值
  updateModel(value, name, modHierarchy) {
    if (modHierarchy === 'search') {
      const { queryList } = this.state;
      let data = queryList.find(item => item.key === name);
      data.value = value;
      find(this.state.queryList)
      this.setState({ queryList })
    } else {
      let obj = modHierarchy ? this.state[modHierarchy] : this.state;
      obj[name] = value;
      this.setState({ ...obj })
    }
  };

  render() {
    let self = this
    let layout = this.props.layout||[{},{}]
    return (
      <div>
        {/*监控键盘事件，自动刷新数据*/}
        {this.props.refreshByEnter &&
        <Keypress keyCode={13} cbk={() => {
          this.handleSearch()
        }}/>
        }
        
        <Modal
          title={this.props.title || '选择'}
          visible={this.props.visible}
          onOk={this.handleConfirm.bind(this)}
          onCancel={this.handleCancel.bind(this)}
          width={this.state.modalWidth}
        >
          {this.state.queryList&&
          <Form className="public_listMain">
            <AdvanceSearch footer={
              <span>
                <Button type="primary" htmlType="button" size="large" onClick={this.handleSearch.bind(this)}>搜索</Button>
                <Button htmlType="button" size="large" onClick={this.handleReset.bind(this)}>重置</Button>
              </span>
            }>
              <QueryCondition
                data={this.state.queryList}
                inputChange={(key, value) => this.updateModel(value, key, 'search')}
              />
            </AdvanceSearch>
          </Form>
          }
          {/*插入的html*/}
          {this.props.slot||null}
          {/*内容区*/}
          <Row gutter={16}  id="multiSelectContainter">
            {/*表格-未选中*/}
            <Col span={16} {...layout[0]}>
              <div className="boxShadow" id='table'>
                <Table
                  style={{marginTop: this.props.isSingle ? 'auto' : 32 }}
                  className={styles.table}
                  columns={this.setTableColumn()}
                  dataSource={this.state.tableData}
                  loading={this.state.loadingFlag}
                  pagination={this.setPagination()}
                  scroll={{
                    y: (this.state.tableData && this.state.tableData.length > 4) ? 310 : null,
                    ...(this.props.tableScroll || {})
                  }}
                />
              </div>
            </Col>
            {/*表格-已选中*/}
            <Col span={8} {...layout[1]}>
              <div className={'boxShadow ' + styles.selected}>
                {
                  this.props.isSingle
                    ? ''
                    : <Row className={styles.title}>
                  <Col span={12}>
                    {
                          this.state.selectedRows.length !== 0 ? <Popconfirm
                            getPopupContainer={() => document.getElementById('multiSelectContainter')}
                        title='确定要删除吗?'
                        okText='确定'
                        cancelText='取消'
                        onConfirm={() => this.deleteSelected('')}
                      >
                        <Link>
                          批量删除
                        </Link>
                          </Popconfirm> : <Link onClick={e => { message.warn("至少选择一项") }}>批量删除</Link>
                    }
                  </Col>
                  <Col span={12}>
                    <Popconfirm
                          getPopupContainer={() => document.getElementById('multiSelectContainter')}
                      title='确定要删除吗?'
                      okText='确定'
                      cancelText='取消'
                      onConfirm={() => this.deleteSelected('all')}
                      onCancel={() => self.allSelected()}
                    >
                      <Link onClick={() => self.allSelected(true)} >
                        全部删除
                      </Link>
                    </Popconfirm>
                  </Col>
                </Row>
                }
                <Row className={styles.scroll} style={{ maxHeight: this.state.maxHeight}}>
                  <Col>
                    <Table
                      // className={cx(styles.textNoWrap, styles.table)}
                      columns={this.setSelectedColumn()}
                      dataSource={this.state.selectedProduct}
                      pagination={false}
                      rowSelection={this.props.isSingle?null:{
                        selectedRowKeys: self.state.selectedRowKeys,
                        onChange: (selectedRowKeys, selectedRows) => {
                          this.setState({ selectedRowKeys, selectedRows })
                        },
                      }}
                      // scroll={{
                      //   y: (this.state.selectedProduct && this.state.selectedProduct.length > 4) ? 310 : null,
                      //   ...(this.props.selectedTableScroll || {})
                      // }}
                    />
                  </Col>
                </Row>
              </div>
            </Col>
          </Row>
        </Modal>
      </div>
    )
  }

}
